<template>
  <div>
    <navs :isDark="true"></navs>
    <div class="cont">
      <div class="flex-st">
        <div class="Data">{{ $t("leaderboard.title") }}</div>
        <img src="../assets/image/home/2.png" class="home2" alt="" />
      </div>

      <!-- 团队数据概览 -->
      <div class="flex-ct">
        <div class="RSC">
          <div class="flex-st">
            <img src="../assets/image/other/svg7.png" alt="团队总人数图标" />
            <div>
              {{ totalPower !== null ? totalPower : "--" }}
            </div>
          </div>
          <div class="text">{{ $t("leaderboard.teamCount") }}</div>
        </div>
        <div class="RSC">
          <div class="flex-st">
            <img src="../assets/image/other/svg8.png" alt="" />
            <div>
              {{
                teamData.redirectCount !== null ? teamData.redirectCount : "--"
              }}
            </div>
          </div>
          <div class="text">{{ $t("leaderboard.directReferral") }}</div>
        </div>
      </div>

      <div class="flex-ct">
        <div class="RSC">
          <div class="flex-st">
            <img src="../assets/image/other/svg9.png" alt="大区人数图标" />
            <div>
              {{ dnft !== null ? dnft : "--" }}
            </div>
          </div>
          <div class="text">{{ $t("leaderboard.bigTeamCount") }}</div>
        </div>
        <div class="RSC">
          <div class="flex-st">
            <img src="../assets/image/other/svg10.png" alt="" />
            <div>
              {{ xnft !== null ? (xnft < 0 ? 0 : xnft) : "--" }}
            </div>
          </div>
          <div class="text">{{ $t("leaderboard.smallTeamCount") }}</div>
        </div>
      </div>

      <!-- 我的等级 -->
      <div class="flex-ct lev">
        <div>
          <div class="v1">
            {{ levelText }}
          </div>
          <div>{{ $t("leaderboard.myLevel") }}</div>
        </div>
        <img :src="levelImage" alt="" />
        <!-- 升级按钮 -->
        <!-- <div class="isupgrade-btn" v-if="!isToLevel">
          {{ $t("leaderboard.upgrade") }}
        </div> -->
        <div class="upgrade-btn" @click="upgradeLevel">
          {{ $t("leaderboard.upgrade") }}
        </div>
      </div>

      <!-- 团队列表 -->
      <div class="helistbox">
        <div class="title">{{ $t("leaderboard.teamList") }}</div>
        <div class="helistlist">
          <div class="flex-cc header">
            <div>{{ $t("leaderboard.rank") }}</div>
            <div>{{ $t("leaderboard.address") }}</div>
            <div>{{ $t("leaderboard.subordinates") }}</div>
            <div>{{ $t("leaderboard.level") }}</div>
          </div>
          <div
            v-for="(member, index) in teamMembers"
            :key="index"
            class="member-item"
          >
            <div class="flex-cc">
              <div class="num">{{ index + 1 }}</div>
              <div class="address">{{ shortenAddress(member.add) }}</div>
              <div>{{ member.teamCount }}</div>
              <div>V{{ member.level }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <foot></foot>
  </div>
</template>

<script>
import navs from "../components/nav.vue";
import foot from "./components/foot.vue";
import { AIMEMainContract } from "@/assets/js/web3.js";
import { Toast } from "vant";

export default {
  components: {
    navs,
    foot,
  },
  data() {
    return {
      teamData: {
        teamCount: null,
        redirectCount: null,
        bigteamCount: null,
        samllteamCount: null,
        level: null,
      },
      teamMembers: [],
      loading: false,
      isToLevel: false,
      error: null,
      leaderAddress: "",
      currentAccount: "",
      totalPower: "",
      xnft: "",
      dnft: "",
    };
  },
  computed: {
    // currentAccount() {
    //   return sessionStorage.getItem("account") || "";
    // },
    // leaderAddress() {
    //   return sessionStorage.getItem("leaderAddress") || "";
    // },
    levelText() {
      return this.teamData.level !== null ? `V${this.teamData.level}` : "--";
    },
    levelImage() {
      const level = this.teamData.level || 0;
      return require(`../assets/image/other/${level}.png`);
    },
  },
  async mounted() {
    this.currentAccount = sessionStorage.getItem("account") || "";
    this.leaderAddress = sessionStorage.getItem("leaderAddress") || "";
    await this.loadTeamData();
  },
  methods: {
    async loadTeamData() {
      if (!this.currentAccount) return;

      try {
        this.loading = true;
        this.error = null;

        // 查询团队概要数据
        const teamData = await AIMEMainContract.methods
          .queryTeamData(this.currentAccount)
          .call();
        // //查询是否可以升级
        // let getToLevel = await AIMEMainContract.methods
        //   .canUpgradeToLevel(this.currentAccount)
        //   .call();
        // this.isToLevel = getToLevel;
        // console.log(teamData);
        this.teamData = {
          teamCount: teamData.teamCount,
          redirectCount: teamData.redirectCount,
          bigteamCount: teamData.bigteamCount,
          samllteamCount: teamData.samllteamCount,
          level: teamData.level,
        };
        const res = await AIMEMainContract.methods
          .users(this.currentAccount)
          .call();
        // console.log(res);
        this.totalPower = res.totalPower;

        const res1 = await AIMEMainContract.methods
          .queryUserTeamMintNftMax(this.currentAccount)
          .call();
        this.dnft = res1;
        this.xnft = this.totalPower - res1;

        // 查询团队成员列表
        const members = await AIMEMainContract.methods
          .queryUserTeam(this.currentAccount)
          .call();
        console.log(members);
        this.teamMembers = members.map((member) => ({
          add: member.add,
          teamCount: member.teamCount,
          level: member.level,
        }));
      } catch (error) {
        console.error("获取团队数据失败:", error);
        this.error = "获取团队数据失败，请刷新重试";
      } finally {
        this.loading = false;
      }
    },

    shortenAddress(address) {
      if (!address) return "";
      return `${address.substring(0, 6)}...${address.substring(
        address.length - 4
      )}`;
    },
    async upgradeLevel() {
      if (!this.currentAccount)
        return Toast(this.$t("home.pleaseConnectWallet"));
      console.log(this.leaderAddress);
      if (!this.leaderAddress) {
        return Toast(this.$t("mes.mes2"));
      }
      try {
        await AIMEMainContract.methods
          .updateLevel(this.leaderAddress)
          .send({ from: this.currentAccount });
        Toast(this.$t("leaderboard.upgradeSuccess"));
        this.loadTeamData(); // 升级后刷新数据
      } catch (err) {
        Toast(this.$t("leaderboard.upgradeFail"));
      }
    },
  },
};
</script>

<style lang="less" scoped>
.cont {
  padding: 0 36px;
  background: #121212;
  font-weight: 400;
  font-size: 28px;
  color: #a1a1a1;
  .flex-st {
    font-size: 48px;
    color: #ededed;
    .Data {
      font-weight: 400;
      font-size: 48px;
      color: #ededed;
      flex: 0 0 200px;
    }
  }
  .home2 {
    width: 100%;
    // margin: 128px 0;
    margin-left: -90px;
  }
}

.RSC {
  flex: 1;
  padding: 28px 34px;
  border-radius: 16px 16px 16px 16px;
  border: 2px solid #212121;
  font-weight: 500;
  font-size: 40px;
  color: #ededed;
  margin: 16px 5px;

  img {
    width: 80px;
    height: 80px;
    margin-right: 30px;
  }
  .text {
    font-size: 28px;
    color: #a1a1a1;
    margin-top: 16px;
  }
}
.lev {
  margin: 44px 0;
  border-radius: 16px 16px 16px 16px;
  border: 2px solid #212121;
  padding: 24px 40px;
  font-size: 28px;
  color: #a1a1a1;
  .upgrade-btn {
    background: #bdee63;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    font-weight: 500;
    font-size: 28px;
    color: #121113;
    padding: 10px 52px;
    text-align: center;
    margin-top: 10px;
    display: inline-block;
  }
  .isupgrade-btn {
    background: #4f5349;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    font-weight: 500;
    font-size: 28px;
    color: #a1a1a1;
    padding: 10px 52px;
    text-align: center;
    margin-top: 10px;
    display: inline-block;
  }
  .v1 {
    font-family: Notable, Notable;
    font-weight: 400;
    font-size: 40px;
    color: #ededed;
    margin-bottom: 22px;
  }
  img {
    width: 144px;
    height: 144px;
  }
}
.helistbox {
  padding: 0 0 64px;
  .title {
    font-weight: 400;
    font-size: 48px;
    color: #ededed;
    margin-bottom: 64px;
  }
  .helistlist {
    border-radius: 16px 16px 16px 16px;
    border: 2px solid #212121;
    padding: 50px 0;
  }
  .flex-cc {
    text-align: center;
    > div {
      flex: 1;
      margin-bottom: 28px;
    }
    .num {
      color: #bdee63;
    }
  }
}
</style>
